<template>
  <Card dis-hover :bordered="false">
    <Row :gutter="8" class="ivu-mb-8">
      <Col>
        <DatePicker
          type="daterange"
          v-model="params.arrdate"
          class="ivu-mr-8"
          ref="date"
          @on-change="askData"
          placeholder="请选择时间段"
          :time-picker-options="{ steps: [1, 10, 10] }"
          v-width="200"
          :clearable="false"
          :options="dateOption"
          @click.native="nativeClick"
        ></DatePicker>
      </Col>
      <!-- <Col>
            <Select v-model="params.net_config_id" v-width="200" placeholder="请选择营销中心" @on-change="askDataConditions" clearable>
                <Option v-for="item in configList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            </Col> -->
      <Col>
        <Select
          v-model="params.channel_id"
          v-width="200"
          placeholder="请选择渠道"
          @on-change="askDataCondition"
          clearable
        >
          <Option
            v-for="item in channelList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </Col>
    </Row>
    <Table
      :columns="columns"
      :data="data"
      border
      :span-method="handleSpan"
      :loading="loading"
    >
      <template slot-scope="{ row }" slot="arrived_num">
        <span v-if="row.names === '实际'">{{
          row.arrived_num === "" ? "/" : row.arrived_num
        }}</span>
        <span v-else-if="row.names === '计划'">{{
          row.arrived_num === "" ? "/" : row.arrived_num
        }}</span>
        <span v-else-if="row.names === '差值'">
          <font :color="row.arrived_num > 0 ? '#ed4014' : '#19be6b'">{{
            row.arrived_num > 0 ? `+${row.arrived_num}` : row.arrived_num
          }}</font>
        </span>
      </template>
      <template slot-scope="{ row }" slot="qz_dialogue_num">
        <span v-if="row.names === '实际'">{{
          row.qz_dialogue_num === "" ? "/" : row.qz_dialogue_num
        }}</span>
        <span v-else-if="row.names === '计划'">{{
          row.qz_dialogue_num === "" ? "/" : row.qz_dialogue_num
        }}</span>
        <span v-else-if="row.names === '差值'">
          <font :color="row.qz_dialogue_num > 0 ? '#ed4014' : '#19be6b'">{{
            row.qz_dialogue_num > 0
              ? `+${row.qz_dialogue_num}`
              : row.qz_dialogue_num
          }}</font>
        </span>
      </template>
      <template slot-scope="{ row }" slot="dialogue_num">
        <span v-if="row.names === '实际'">{{
          row.dialogue_num === "" ? "/" : row.dialogue_num
        }}</span>
        <span v-else-if="row.names === '计划'">{{
          row.dialogue_num === "" ? "/" : row.dialogue_num
        }}</span>
        <span v-else-if="row.names === '差值'">
          <font :color="row.dialogue_num > 0 ? '#ed4014' : '#19be6b'">{{
            row.dialogue_num > 0 ? `+${row.dialogue_num}` : row.dialogue_num
          }}</font>
        </span>
      </template>
      <template slot-scope="{ row }" slot="conver_rate">
        <!-- <span v-if="row.names==='实际'">{{row.conver_rate?`${row.conver_rate}%`:''}}</span> -->
        <span v-if="row.names === '实际'">{{
          typeof row.conver_rate == "number"
            ? `${row.conver_rate}%`
            : row.conver_rate === ""
            ? "/"
            : row.conver_rate
        }}</span>
        <span v-else-if="row.names === '计划'">{{
          row.conver_rate === "" ? "/" : `${row.conver_rate}%`
        }}</span>
        <span v-else-if="row.names === '差值'">
          <font :color="row.conver_rate > 0 ? '#ed4014' : '#19be6b'">{{
            row.conver_rate > 0
              ? `+${row.conver_rate}%`
              : row.conver_rate < 0
              ? `${row.conver_rate}%`
              : ""
          }}</font>
        </span>
      </template>
      <template slot-scope="{ row }" slot="plan_consume">
        <span v-if="row.names === '实际'">{{
          row.plan_consume === "" ? "/" : row.plan_consume
        }}</span>
        <span v-else-if="row.names === '计划'">{{
          row.plan_consume === "" ? "/" : row.plan_consume
        }}</span>
        <span v-else-if="row.names === '差值'">
          <font :color="row.plan_consume > 0 ? '#19be6b' : '#ed4014'">{{
            row.plan_consume > 0 ? `+${row.plan_consume}` : row.plan_consume
          }}</font>
        </span>
      </template>
      <template slot-scope="{ row }" slot="arrived_cost">
        <span v-if="row.names === '实际'">{{
          row.arrived_cost === "" ? "/" : row.arrived_cost
        }}</span>
        <span v-else-if="row.names === '计划'">{{
          row.arrived_cost === "" ? "/" : row.arrived_cost
        }}</span>
        <span v-else-if="row.names === '差值'">
          <font :color="row.arrived_cost > 0 ? '#19be6b' : '#ed4014'">{{
            row.arrived_cost > 0 ? `+${row.arrived_cost}` : row.arrived_cost
          }}</font>
        </span>
      </template>
      <template slot-scope="{ row }" slot="qz_dialogue_cost">
        <span v-if="row.names === '实际'">{{
          row.qz_dialogue_cost === "" ? "/" : row.qz_dialogue_cost
        }}</span>
        <span v-else-if="row.names === '计划'">{{
          row.qz_dialogue_cost === "" ? "/" : row.qz_dialogue_cost
        }}</span>
        <span v-else-if="row.names === '差值'">
          <font :color="row.qz_dialogue_cost > 0 ? '#19be6b' : '#ed4014'">{{
            row.qz_dialogue_cost > 0
              ? `+${row.qz_dialogue_cost}`
              : row.qz_dialogue_cost
          }}</font>
        </span>
      </template>
      <template slot-scope="{ row }" slot="dialogue_cost">
        <span v-if="row.names === '实际'">{{
          row.dialogue_cost === "" ? "/" : row.dialogue_cost
        }}</span>
        <span v-else-if="row.names === '计划'">{{
          row.dialogue_cost === "" ? "/" : row.dialogue_cost
        }}</span>
        <span v-else-if="row.names === '差值'">
          <font :color="row.dialogue_cost > 0 ? '#19be6b' : '#ed4014'">{{
            row.dialogue_cost > 0 ? `+${row.dialogue_cost}` : row.dialogue_cost
          }}</font>
        </span>
      </template>
      <template slot-scope="{ row }" slot="finish_rate">
        <template v-if="typeof row.finish_rate == 'number'">
          <Progress
            :percent="row.finish_rate >= 100 ? 100 : row.finish_rate"
            :stroke-width="5"
          >
            <span>{{ row.finish_rate }}%</span>
          </Progress>
        </template>
      </template>
      <template slot-scope="{ row }" slot="action">
        <div class="compare" @click="compare(row)">同比</div>
      </template>
    </Table>
    <compare ref="compare"></compare>
  </Card>
</template>
<script>
import compare from "./compare";
import { netreportproject, netreportprojectcondition } from "@/api/hqapi";
import dayjs from "dayjs";
export default {
  name: "projectReport",
  components: { compare },
  data() {
    return {
      params: {
        channel_id: "",
        // net_config_id: '',
        arrdate: [
          dayjs().startOf("month").format("YYYY-MM-DD"),
          dayjs().startOf("month").format("DD") === "01"
            ? dayjs().startOf("month").format("YYYY-MM-DD")
            : dayjs().subtract(1, "day").format("YYYY-MM-DD"),
        ],
      },
      configList: [],
      channelList: [],
      model: "",
      cityList: [],
      columns: [
        { title: "项目", key: "name", minWidth: 100, fixed: "left" },
        { title: "对比", key: "names", minWidth: 80 },
        { title: "到诊", slot: "arrived_num", minWidth: 100 },
        { title: "确诊对话", slot: "qz_dialogue_num", minWidth: 100 },
        { title: "对话", slot: "dialogue_num", minWidth: 100 },
        { title: "转化率", slot: "conver_rate", minWidth: 100 },
        { title: "消费", slot: "plan_consume", minWidth: 150 },
        { title: "到诊成本", slot: "arrived_cost", minWidth: 150 },
        { title: "确诊对话成本", slot: "qz_dialogue_cost", minWidth: 150 },
        { title: "对话成本", slot: "dialogue_cost", minWidth: 150 },
        {
          title: "完成进度",
          key: "finish_rate",
          slot: "finish_rate",
          width: 300,
        },
        { title: "操作", key: "action", slot: "action", minWidth: 80 },
      ],
      data: [],
      loading: false,
      dateOption: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        },
      },
    };
  },
  mounted() {
    this.initial();
  },
  methods: {
    initial() {
      this.askDataCondition();
    },
    // askDataConditions() {
    //     this.params.channel_id = '';
    //     this.askDataCondition();
    // },
    askDataCondition() {
      let params = {
        channel_id: this.params.channel_id,
        // net_config_id: this.params.net_config_id
      };
      netreportprojectcondition(params).then((res) => {
        this.configList = res.config;
        this.channelList = res.channel;
        this.askData();
      });
    },
    askData() {
      let params = {
        start_time: dayjs(this.params.arrdate[0]).format("YYYY-MM-DD"),
        end_time: dayjs(this.params.arrdate[1]).format("YYYY-MM-DD"),
        channel_id: this.params.channel_id ? this.params.channel_id : "",
        // net_config_id: this.params.net_config_id ? this.params.net_config_id : ''
      };
      this.loading = true;
      netreportproject(params).then((res) => {
        this.data = [];
        res.forEach((item) => {
          this.data.push({
            id: item.id,
            name: item.name,
            finish_rate: item.finish_rate,
            names: "实际",
            ...item.actual,
          });
          this.data.push({
            id: item.id,
            name: item.name,
            finish_rate: item.finish_rate,
            names: "计划",
            ...item.plan,
          });
          this.data.push({
            id: item.id,
            name: item.name,
            finish_rate: item.finish_rate,
            names: "差值",
            ...item.diff,
          });
        });
        this.loading = false;
      });
    },
    compare(row) {
      let params = {
        start_time: dayjs(this.params.arrdate[0]).format("YYYY-MM-DD"),
        end_time: dayjs(this.params.arrdate[1]).format("YYYY-MM-DD"),
        // net_config_id: this.params.net_config_id ? this.params.net_config_id : '',
        channel_id: this.params.channel_id ? this.params.channel_id : "",
        project_id: row.id,
      };
      let channel = "";
      this.channelList.forEach((item) => {
        if (item.value === this.params.channel_id) {
          channel = item.label;
        }
      });
      this.$refs.compare.initial(params, row.name, channel);
    },
    handleSpan({ row, column, rowIndex, columnIndex }) {
      if (
        rowIndex % 3 === 0 &&
        (column.key === "name" ||
          column.key === "finish_rate" ||
          column.key === "action")
      ) {
        return [3, 1];
      } else if (
        rowIndex % 3 === 1 &&
        (column.key === "name" ||
          column.key === "finish_rate" ||
          column.key === "action")
      ) {
        return [0, 0];
      } else if (
        rowIndex % 3 === 2 &&
        (column.key === "name" ||
          column.key === "finish_rate" ||
          column.key === "action")
      ) {
        return [0, 0];
      }
    },
    // 限制当月选择范围
    nativeClick(e) {
      const target = this.$refs["date"].$refs["pickerPanel"];
      target.handlePickClick = () => {
        // 这里加这么一段
        const { from, selecting } = target["rangeState"];
        if (from && selecting) {
          this.dateOption = {
            disabledDate(value) {
              let start_date = dayjs(from)
                .add(-1, "month")
                .endOf("month")
                .format("YYYY-MM-DD");
              let now_start_date = dayjs()
                .add(-1, "month")
                .endOf("month")
                .format("YYYY-MM-DD");
              let end_date =
                start_date === now_start_date
                  ? dayjs().format("YYYY-MM-DD")
                  : dayjs(from).endOf("month").format("YYYY-MM-DD");
              const startTime = new Date(start_date);
              const endTime = new Date(end_date);

              return !(value >= startTime && value <= endTime);
            },
          };
        }
      };
      const { from, selecting } = target["rangeState"];
      if (from && selecting) {
        this.dateOption = {
          disabledDate(value) {
            let start_date = dayjs(from)
              .add(-1, "month")
              .endOf("month")
              .format("YYYY-MM-DD");
            let now_start_date = dayjs()
              .add(-1, "month")
              .endOf("month")
              .format("YYYY-MM-DD");
            let end_date =
              start_date === now_start_date
                ? dayjs().format("YYYY-MM-DD")
                : dayjs(from).endOf("month").format("YYYY-MM-DD");
            const startTime = new Date(start_date);
            const endTime = new Date(end_date);

            return !(value >= startTime && value <= endTime);
          },
        };
      } else {
        this.dateOption = {
          disabledDate(date) {
            return date && date.valueOf() > Date.now();
          },
        };
      }
    },
  },
};
</script>
<style lang="less" scoped>
.compare {
  color: #2d8cf0;
  font-weight: bold;
  cursor: pointer;
}
</style>
